Pure.CSS মূলত একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা সিম্পল এবং দ্রুত ওয়েব ডিজাইন তৈরি করতে সহায়তা করে। যদিও Pure.CSS সরাসরি বিল্ট-ইন অ্যানিমেশন ক্লাস প্রদান করে না, তবুও আপনি CSS এর transitions এবং animations ব্যবহার করে আপনার ডিজাইনকে জীবন্ত ও ইন্টারেক্টিভ করতে পারেন। এই কোডের মাধ্যমে আপনি Hover Effects এবং Button Animations তৈরি করতে পারেন, যা ওয়েব পেজে ব্যবহারের অভিজ্ঞতাকে আরো আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
এখানে Hover Effects এবং Button Animations তৈরি করার জন্য Pure.CSS এবং কাস্টম CSS অ্যানিমেশন ও ট্রানজিশন ব্যবহার করে কিছু উদাহরণ দেওয়া হলো।
১. Hover Effects with Pure.CSS:
Hover Effects এমন ইফেক্টস যা কোনো উপাদানে মাউস রাখলে অটোমেটিকালি সক্রিয় হয়। আপনি খুব সহজেই এই ইফেক্টসগুলো CSS এর :hover সিলেক্টর ব্যবহার করে তৈরি করতে পারেন।
উদাহরণ ১: Image Hover Effect (ইমেজে হোভার ইফেক্ট)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image Hover Effect</title>
<style>
.image-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 8px;
}
.image-container img {
width: 100%;
height: 100%;
transition: transform 0.3s ease; /* Animation on hover */
}
.image-container:hover img {
transform: scale(1.1); /* Scale the image on hover */
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/300x200" alt="Hover Image">
</div>
</body>
</html>
বিশ্লেষণ:
- .image-container: এই ক্লাসটি একটি ইমেজ কন্টেইনার তৈরি করে যা ইমেজের overflow গোপন রাখে এবং আকার নিয়ন্ত্রণ করে।
- transform: scale(1.1): এটি ইমেজের আকার 10% বাড়িয়ে দেয় যখন মাউস ইমেজের উপর থাকে, ফলে একটি zoom effect তৈরি হয়।
উদাহরণ ২: Text Hover Effect (টেক্সট হোভার ইফেক্ট)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Text Hover Effect</title>
<style>
.hover-text {
font-size: 24px;
font-weight: bold;
color: #333;
transition: color 0.3s ease, transform 0.3s ease;
}
.hover-text:hover {
color: #0078d4; /* Change color on hover */
transform: translateY(-5px); /* Move the text up on hover */
}
</style>
</head>
<body>
<p class="hover-text">Hover over this text to see the effect!</p>
</body>
</html>
বিশ্লেষণ:
- transition: এখানে টেক্সটের color এবং transform প্রপার্টি পরিবর্তনের জন্য ট্রানজিশন অ্যাপ্লাই করা হয়েছে।
- transform: translateY(-5px): এটি টেক্সটকে উপরে সরিয়ে দেয়, যাতে হোভার ইফেক্ট আরও চোখে পড়তে পারে।
২. Button Animations with Pure.CSS:
Button Animations তৈরি করতে CSS এর @keyframes ব্যবহার করা হয়, যার মাধ্যমে বিভিন্ন ধরনের অ্যানিমেশন যেমন বাটনের রঙ পরিবর্তন, স্কেলিং ইত্যাদি করা সম্ভব।
উদাহরণ ১: Button Hover Animation (বাটন হোভার অ্যানিমেশন)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Button Hover Animation</title>
<style>
.animated-button {
background-color: #0078d4;
color: white;
border: none;
padding: 15px 25px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.animated-button:hover {
background-color: #005fa3;
transform: scale(1.1); /* Scale the button on hover */
}
</style>
</head>
<body>
<button class="animated-button">Hover me!</button>
</body>
</html>
বিশ্লেষণ:
- transform: scale(1.1): বাটনের আকার হোভার করার সময় 10% বাড়ানো হয়।
- transition: এই প্রপার্টি দিয়ে হোভার করার সময় সিলেক্টেড প্রপার্টির পরিবর্তন (যেমন রঙ এবং আকার) স্নিগ্ধভাবে হতে সাহায্য করে।
উদাহরণ ২: Button Click Animation (বাটন ক্লিক অ্যানিমেশন)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Button Click Animation</title>
<style>
.click-animation-button {
background-color: #28a745;
color: white;
border: none;
padding: 15px 30px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background-color 0.3s ease;
}
.click-animation-button:active {
background-color: #218838;
}
.click-animation-button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background-color: rgba(255, 255, 255, 0.3);
transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.click-animation-button:active:after {
width: 0;
height: 0;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<button class="click-animation-button">Click me!</button>
</body>
</html>
বিশ্লেষণ:
- :after পসিডো-এলিমেন্ট ব্যবহার করে ক্লিকের সময় একটি সার্কুলার বাটন অ্যানিমেশন তৈরি করা হয়েছে।
- :active সিলেক্টর ব্যবহার করা হয়েছে যাতে বাটন ক্লিক করার সময় সেই অ্যানিমেশন সক্রিয় হয় এবং বাটনটিতে আন্ডারলাইন বা স্কেল ইফেক্ট তৈরি হয়।
Pure.CSS একটি শক্তিশালী CSS ফ্রেমওয়ার্ক, তবে এটি সরাসরি অ্যানিমেশন বা হোভার ইফেক্টের জন্য বিল্ট-ইন ক্লাস প্রদান করে না। কিন্তু আপনি কাস্টম CSS transitions এবং keyframes ব্যবহার করে অত্যন্ত সহজে আকর্ষণীয় hover effects এবং button animations তৈরি করতে পারেন। এতে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন আরো ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি হয়ে ওঠে।
Read more
